<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button id="btn"></button>
        <button id="btn2">减少</button>
    </div>
    <script src="./node_modules/redux/dist/redux.js"></script>
    <script>
        const INCREMENT='INCREMENT';
        const DECREMENT='DECREMENT';
        const {createStore}=Redux;
        const store=createStore(reducer);
        function reducer(state={num:0},action){
            //浅克隆有坑，警惕一下不要直接操作state
            // let newState={num:++state.num}
            // newState.num=++state.num;
            // return {...state,newState}
            //第二种
            // let newState=Object.assign({},state);
            // newState.num=++state.num;
            // return newState;
            switch(action.type){
                case INCREMENT:
                    return {...state,num:++state.num};
                case DECREMENT:
                    return {...state,num:--state.num}
            }
            return state;
        }
        function render(){
            btn.innerText=store.getState().num;
        }
        render();
        btn.onclick=function(){
            store.dispatch({type:INCREMENT});
        }
        btn2.onclick=function(){
            store.dispatch({type:DECREMENT});
        }
        store.subscribe(()=>{
            render();
        })
    </script>
</body>
</html>